<template>
  <div
    class="tree-com"
    id="tree-com"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
  >
    <div class="search-input">
      <el-input v-model="filterText" class="input" placeholder="输入关键字进行过滤" @keyup.enter.native="handleSearch">
        <el-button type="primary" class="inquire" @click="handleSearch" slot="append">搜索</el-button>
      </el-input>
    </div>
    <div class="el-tree-div" ref="elTreeDiv">
      <el-checkbox-group v-model="checkList" @change="checkboxChange" :max="5">
        <el-checkbox :title="item.title" :label="`${item.id}-${item.title}`" v-for="(item, index) in checkboxDatas" :key="index">{{item.title}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="tree-com-tip">注：最多选择5条法规同时对比</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      filterText: '',
      checkboxDatas: [],
      checkList: [],
      page: 1,
      pageSize: 40,
      scrollTimeoutId: -1,
      loading: false,
      loadMore: 'more'
    }
  },
  mounted () {
    this.getLawsList(1, [])
    let scrollView = this.$refs.elTreeDiv
    scrollView.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll (e) {
      if (this.scrollTimeoutId !== -1 || this.loadMore === 'none') {
        return false
      }
      let targetHeight = e.target.offsetHeight
      let childHeight = e.target.scrollHeight
      let targetScrollTop = e.target.scrollTop
      if (targetScrollTop >= childHeight - targetHeight) {
        // 发起请求
        this.getLawsList(this.page + 1, this.checkboxDatas)
      } else {
        return false
      }
      this.scrollTimeoutId = setTimeout(() => {
        clearTimeout(this.scrollTimeoutId)
        this.scrollTimeoutId = -1
      }, 200)
    },
    handleSearch () {
      this.getLawsList(1, [])
    },
    setCheckedNodes (nodes) {
      let checked = []
      nodes.map(e => {
        checked.push(`${e.id}-${e.label}`)
      })
      this.checkList = checked
    },
    checkboxChange (e) {
      let currentNodes = this.formattNodes(e)
      this.$emit('changeCurrentNodes', currentNodes)
    },
    formattNodes (checkedNodes) {
      let res = []
      checkedNodes.map(e => {
        let eArr = e.split('-')
        res.push({
          id: eArr[0],
          label: eArr[1],
          value: eArr[0]
        })
      })
      return res
    },
    getLawsList (page, oldList) {
      this.page = page
      var params = {
        search_type: 1,
        sort_type: 1,
        page: page,
        page_size: this.pageSize
      }
      if (this.filterText) {
        params.keywords = this.filterText
      }
      this.loading = true
      this.$api.getLawsList(params).then(res => {
        let list = res.data.data
        this.checkboxDatas = [...oldList, ...list]
        if (list.length === 0) {
          this.loadMore = 'none'
        } else {
          this.loadMore = 'more'
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$msgMnger.httpError(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.tree-com{
  height: 100%;
  .search-input{
    padding: 20px;
    background: $box-title-bg-color;
  }
  .el-tree-div{
    height: calc(100% - 100px);
    overflow-y: auto;
    padding: 0 10px 0 20px;
    .el-tree{
      overflow: hidden;
    }
  }
  .tree-com-tip{
    background: $box-title-bg-color;
    padding: 5px 20px;
    color: $sedondary-text-color;
  }
}
</style>

<style lang="scss">

#tree-com {
  .el-checkbox-group{
    .el-checkbox{
      margin: 0 !important;
      width: 100%;
      padding: 10px 0 0 0;
      .el-checkbox__label{
        margin-bottom: -4px;
        box-sizing: border-box;
        width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .el-input-group__append {
    background-color: $primary-color !important;
    color: white;
  }
  .el-input-group__append{
    border: none;
  }
  .el-input__inner{
    border-right: none;
  }
}
</style>
